<template>
	<div class="tenantGoodsItem">
		<el-row :gutter="10">
			<el-col :span="6">
				<el-card class="box-card" :body-style="{ overflowY: 'auto', height: '93%' }">
					<div slot="header" class="clearfix">
						<i class="el-icon-menu orgIcon"></i>
						<span>组织机构</span>  
						<el-input placeholder="请输入内容" v-model="filterText" clearable style="margin-top: 10px;" size="small" @clear="getOrgTree">
							<el-select v-model="filterType" slot="prepend" placeholder="请选择" style="width: 100px" @change="changeFilterType">
								<el-option label="组织机构" value="1"></el-option>
								<el-option label="员工姓名" value="2"></el-option> 
								<el-option label="员工账号" value="3"></el-option> 
							</el-select> 
						</el-input>
					</div>
					<el-tree  
						v-show="lazyFlag === true"
						ref="space" 
						:data="treeData" 
						node-key="id" 
						:check-on-click-node="true" 
						:props="defaultProps" 
						:filter-node-method="filterNode"
						@node-click="changeOrgTree"     
						:load="loadNode"
                 		lazy
					>
						<span class="custom-tree-node" slot-scope="{ node }"> 
							<span>{{ node.label }}</span>
						</span>
					</el-tree>
					<el-tree
						v-show="lazyFlag === false"
						ref="space" 
						:data="treeData" 
						node-key="id" 
						:check-on-click-node="true" 
						:props="defaultProps" 
						:filter-node-method="filterNode"
						@node-click="changeOrgTree"
						default-expand-all
					>
						<span class="custom-tree-node" slot-scope="{ node }"> 
							<span>{{ node.label }}</span>
						</span>
					</el-tree>
					
				</el-card>
			</el-col>
			<el-col :span="18">
				<el-card class="box-card"> 
					<e-control 
						:search-form-options="formOptions" 
						@on-search="onSearch" 
						@on-refresh="refreshControlHandle" 
						ref="eForm"
					/> 
					<div class="tenant-tab">
						<el-row class="search-btn"> 
							<el-col>
								<el-button @click="batchRemoveHandle" type="text" icon="el-icon-delete" size="small">
									批量移除
								</el-button>
								<el-button v-if="tableType == 1" @click="openDialog('goods')" type="text" icon="el-icon-connection" size="small">
									绑定商品
								</el-button>
								<el-button v-if="tableType == 2" @click="openDialog('category')" type="text" icon="el-icon-connection" size="small">
									绑定分类
								</el-button>
							</el-col>
							</el-row>
							<el-tabs type="border-card" @tab-click="tabClick"> 
							<el-tab-pane label="按商品" :value="1">
								<e-table 
									:data="tableData1" 
									:columns="columns" 
									border 
									style="width: 100%" 
									:max-height="maxHeightNow"
									:current="currentPage"
									:total="total"
									@page-size-change="changePageSize"
									@page-current-change="changePageCurrent"
									@select="changeTableSelectData"
									@select-all="changeTableSelectAll"
								>
									<template slot-scope="{ scope }" slot="tenantName">
										<el-tooltip :content="scope.row.tenantName" placement="bottom" effect="dark" class="goodsNameBox">
											<span>{{ scope.row.tenantName }}</span>
										</el-tooltip>
									</template> 
									<template slot-scope="{ scope }" slot="type">
										<span v-if="scope.row.type == 1">商品</span>
										<span v-else-if="scope.row.type == 2">分类</span>
									</template>
									<template slot-scope="{ scope }" slot="goodsName">
										<el-tooltip :content="scope.row.goodsName" placement="bottom" effect="dark" class="goodsNameBox">
											<span>{{ scope.row.goodsName }}</span>
										</el-tooltip>
									</template> 
									<template slot-scope="{ scope }" slot="brandName">
										<el-tooltip :content="scope.row.brandName" placement="bottom" effect="dark" class="goodsNameBox">
											<span>{{ scope.row.brandName }}</span>
										</el-tooltip>
									</template>
									<template slot-scope="{ scope }" slot="supplierName">
										<el-tooltip :content="scope.row.supplierName" placement="bottom" effect="dark" class="goodsNameBox">
											<span>{{ scope.row.supplierName }}</span>
										</el-tooltip>
									</template>
									<template slot-scope="{ scope }" slot="goodsState">
										<span v-if="scope.row.goodsState == 'PASS'">上架</span>
										<span v-else-if="scope.row.goodsState == 'PASS_DIS'">可见不可售</span>
										<span v-else-if="scope.row.goodsState == 'DOWN'">下架</span>
										<span v-else>{{ scope.row.goodsState }}</span>
									</template>
									<template slot-scope="{ scope }" slot="templateName">
										<el-tooltip :content="scope.row.templateName" placement="bottom" effect="dark" class="goodsNameBox">
											<span>{{ scope.row.templateName }}</span>
										</el-tooltip>
									</template>
									<template slot-scope="{scope}" slot="agreementPrice">
										<span>
											{{ priceCalc(scope.row.agreementPrice)}}
										</span>
									</template>
									<template slot-scope="{scope}" slot="initExcludeTaxPrice">
										<span>
											{{ priceCalc(scope.row.initExcludeTaxPrice)}}
										</span>
									</template>
									<template slot-scope="{scope}" slot="goodsPrice">
										<span>
											{{ priceCalc(scope.row.goodsPrice)}}
										</span>
									</template>
									<template slot-scope="{scope}" slot="excludeTaxPrice">
										<span>
											{{ priceCalc(scope.row.excludeTaxPrice)}}
										</span>
									</template>
									<template slot-scope="{ scope }" slot="operation">
										<el-button size="mini" type="text" icon="el-icon-edit" @click="editorEvent(scope.row)">编辑
										</el-button>
										<el-button size="mini" type="text" icon="el-icon-delete" @click="deleteGoodsEvent(scope.row)">移除
										</el-button>
									</template>
								</e-table>  
							</el-tab-pane>
							<el-tab-pane label="按分类" :value="2">
								<e-table 
									:data="tableData2" 
									:columns="columns3" 
									border 
									style="width: 100%" 
									:max-height="maxHeightNow"
									:current="currentPage2"
									:total="total2"
									@page-size-change="changePageSize"
									@page-current-change="changePageCurrent"
									@select="changeTableSelectData"
									@select-all="changeTableSelectAll"
								>
									<template slot-scope="{ scope }" slot="tenantName">
										<el-tooltip :content="scope.row.tenantName" placement="bottom" effect="dark" class="goodsNameBox">
											<span>{{ scope.row.tenantName }}</span>
										</el-tooltip>
									</template> 
									<template slot-scope="{ scope }" slot="type">
										<span v-if="scope.row.type == 1">商品</span>
										<span v-else-if="scope.row.type == 2">分类</span>
									</template>
									<template slot-scope="{ scope }" slot="categoryName">
										<el-tooltip :content="scope.row.categoryName" placement="bottom" effect="dark" class="goodsNameBox">
											<span>{{ scope.row.categoryName }}</span>
										</el-tooltip>
									</template>   
									<template slot-scope="{ scope }" slot="templateName">
										<el-tooltip :content="scope.row.templateName" placement="bottom" effect="dark" class="goodsNameBox">
											<span>{{ scope.row.templateName }}</span>
										</el-tooltip>
									</template>   
									<template slot-scope="{ scope }" slot="goodsState">
										<span v-if="scope.row.goodsState == 'PASS'">上架</span>
										<span v-else-if="scope.row.goodsState == 'PASS_DIS'">可见不可售</span>
										<span v-else-if="scope.row.goodsState == 'DOWN'">下架</span>
										<span v-else>{{ scope.row.goodsState }}</span>
									</template> 
									<template slot-scope="{ scope }" slot="operation">
										<el-button size="mini" type="text" icon="el-icon-edit" @click="editorOrgCategoty(scope.row)">编辑
										</el-button>
										<el-button size="mini" type="text" icon="el-icon-delete" @click="deleteGoodsEvent(scope.row)">移除
										</el-button>
									</template>
								</e-table>   
							</el-tab-pane>
						</el-tabs>
					</div>
					
				</el-card>
			</el-col>
		</el-row>

		<addGoodsDialog 
			:addVisible="batchAddVisible"
			:id="orgId"
			:supplierOption="this.formOptions[2].options"
			:cancelDialog="cancelDialogDataHandle"
			:refresh="addGoodsRefresh"
		/> 
		
		<el-dialog title="编辑商品信息" :visible.sync="editDialogShow" :close-on-click-modal="false"
			:close-on-press-escape="false" :before-close="cancelDialogDataHandle" width="1000px" ref="dialog">
			<div style="padding-bottom: 60px;">
				<el-alert
					title="温馨提示"
					type="info"
					description="选择商品价格模版后，价格信息禁止编辑"
					show-icon
					:closable="false"
				>
				</el-alert>
				<br/>
				<el-form
					ref="editForm"	
					:model="formData"
					:rules="hasRule?editFormRules:{}"
					label-width="140px"
				>

					<el-row>
						<el-col :span="12">
							<el-form-item label="商品名称">
								<el-input v-model="formData.goodsName" disabled type="text"  />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="sku">
								<el-input v-model="formData.sku" disabled type="text"  />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="供应商">
								<el-input v-model="formData.supplierName" disabled type="text"  />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="商品状态">
								<el-select v-model="formData.goodsState" clearable>
									<el-option label="上架" value="PASS"></el-option>
									<el-option label="下架" value="DOWN"></el-option>
									<el-option label="可见不可售" value="PASS_DIS"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="商品价格模版" prop="templateId">
								<el-select 
									v-model="formData.templateId" 
									collapse-tags
									filterable
									clearable 
									placeholder="请选择商品价格模版"
									@change="onChangeTemplate('goods')"
								>
									<el-option
										v-for="(item,index) in templateOption"
										:key="index" 
										:label="item.templateName" 
										:value="item.id"
									>
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row> 
					<el-row> 
						<el-col :span="12">
							<el-form-item label="协议未税价 (元)" prop="initExcludeTaxPrice">
								<el-input type="number" v-model="formData.initExcludeTaxPrice" min="1" step="1" :precision="2" :disabled="!hasRule" :max="9999999.00"  placeholder="请输入协议未税价" clearable @change="changeInitExcludeTaxPrice"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="商城未税价 (元)" prop="excludeTaxPrice">
								<el-input type="number" v-model="formData.excludeTaxPrice" min="1" step="1" :precision="2" :max="9999999.00" :disabled="!hasRule" placeholder="请输入商城未税价" clearable @change="changeExcludeTaxPrice" ></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="协议价税率" prop="initTaxRate">
								<el-input type="number" v-model="formData.initTaxRate" min="0.01" step="1" :precision="2" :max="9999999.00" :disabled="!hasRule" placeholder="请输入协议价税率" clearable @change="changeInitTaxRate"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="商城价税率" prop="taxRate">
								<el-input type="number" v-model="formData.taxRate" min="0.01" step="1" :precision="2" :max="9999999.00" :disabled="!hasRule" placeholder="请输入商城价税率" clearable  @change="changeTaxRate" ></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="协议含税价 (元)" prop="agreementPrice">
								<el-input type="number" v-model="formData.agreementPrice" disabled placeholder="请输入协议含税价" clearable ></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="商城含税价 (元)" prop="goodsPrice">
								<el-input type="number" v-model="formData.goodsPrice" disabled placeholder="请输入商城含税价" clearable ></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button  @click="cancelDialogDataHandle">取 消</el-button>
					<el-button type="primary" @click="saveDialogDataHandle">提 交</el-button>
				</div>
			</div>
		</el-dialog> 

		<el-dialog title="绑定分类" :visible.sync="categoryDialogShow" :close-on-click-modal="false"
			:close-on-press-escape="false" :before-close="cancelDialogDataHandle" width="1000px"
			ref="dialog">
			<div style="padding-bottom: 60px;">
				<el-alert
					title="温馨提示"
					type="info"
					description="选择商品价格模版后，价格信息禁止编辑"
					show-icon
					:closable="false"
				>
				</el-alert>
				<br/> 
				<el-form
					ref="bindForm"	
					:model="bindFormData"
					label-width="140px" 
				> 
					<el-row  v-if="this.bindFormData.id"> 
						<el-col :span="12">
							<el-form-item label="组织机构名称"  prop="category">
								{{this.bindFormData.tenantName}}
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="商品分类"  prop="category">
								{{this.bindFormData.categoryName}}
							</el-form-item>
						</el-col>
					</el-row>
					<el-row v-else>
						<el-col>
							<el-form-item  label="商品分类"  prop="category">
								<div class="inner-category-box" v-loading="categotyLoading">
									<el-tree class="tree tree-category" ref="treeCategory" :data="categoryList"
										:default-checked-keys="categoryAuthList" show-checkbox :props="{label: 'categoryNameAll'}"
										:filter-node-method="filterNodeCategory" node-key="id">
										<div class="tree-item" slot-scope="{ node, data }">
											<div class="item">{{ node.label }}</div>
										</div>
									</el-tree>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="商品状态">
								<el-select v-model="bindFormData.goodsState" clearable>
									<el-option label="上架" value="PASS"></el-option>
									<el-option label="下架" value="DOWN"></el-option>
									<el-option label="可见不可售" value="PASS_DIS"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="商品价格模版" prop="templateId">
								<el-select 
									v-model="bindFormData.templateId" 
									collapse-tags
									filterable
									clearable 
									placeholder="请选择商品价格模版" 
								>
									<el-option
										v-for="(item,index) in templateOption"
										:key="index"
										:label="item.templateName" 
										:value="item.id"
										@click.native="handleClickTemplate(item)"
										>
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>  
					</el-row> 
				</el-form> 
				<el-alert type="info" :closable="false" v-if="bindFormData.templateId">
					<el-descriptions title="商品价格模版信息" :column="2">
						<el-descriptions-item label="商城未税价加点方式">
							{{templateInfo.pointType==="1"?"百分比":templateInfo.pointType==="2"?"固定值":""}}
						</el-descriptions-item>
						<el-descriptions-item label="商城未税价加点值">{{templateInfo.point}}</el-descriptions-item>
						<el-descriptions-item label="协议未税价加点方式">
							{{templateInfo.initPointType==="1"?"百分比":templateInfo.initPointType==="2"?"固定值":""}}
						</el-descriptions-item>
						<el-descriptions-item label="协议未税价加点值">{{templateInfo.initPoint}}</el-descriptions-item>
					</el-descriptions>
				</el-alert>
				<div slot="footer" class="dialog-footer">
					<el-button  @click="cancelDialogDataHandle">取 消</el-button>
					<el-button type="primary" @click="saveBindDialogHandle">提 交</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { supplierList,allCategory } from "@/api/supplierActivity/supplier"; 
import eControl from '@/components/e-control' 
import { columns, columns3 } from "./columns";
	import {
		formOptions, 
		btns
	} from './control'
	import { 
		editFormRules
} from './form' 
import addGoodsDialog from "./components/addGoodsDialog";
import { priceCalc } from "@/util/common";
import {
	getOrgTreeApi,
	getTenantsByIdApi,
	orgGoodsListApi,
	deleteGoodsApi,
	priceTemplateListApi,
	updateGoodsApi,
	bindCategoryApi,
	getOrgTreeByUserApi,
	selectTemplateApi,
	batchDeletePoolApi
} from "@/api/itemPoolApi.js"; 
	export default {
		name: 'tenant_goods_item',
		components: {
			eControl,
			addGoodsDialog
		},
	data() { 
			return {
				priceCalc,
				columns,
				columns3,
				formOptions, 
				btns,  
				editFormRules,  
				editDialogShow: false,  
				formData: {},
				bindFormData: {},
				// 左侧树
				treeData: [],
				defaultProps: {
					children: 'children',
					label: 'name',
					isLeaf: 'leaf', //指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效
				}, 
				// 表格选中数据
				tableSelectData: [],
				tableData1: [],  
				tableData2: [],
				dialogTableData: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
				total2: 0,
				currentPage2: 1,
				pageSize2: 10, 
				tenantIds: [],
				rolesArr: [], // 用户权限内的角色
				searchData: {},
				selectUserId: '', // 选中用户的ID
				isOrg: true, // 编辑用户信息，检查是否绑定组织， true 没有组织，false 有组织
				filterText: '',  
				batchAddVisible: false,
				orgId: "",
				templateParams: {
					pageSize: 500,
					pageNum: 1, 
				},
				templateOption: [],
				hasRule: true, 
				filterType: "1",
				categoryDialogShow: false,
				categotyLoading: false,
				categoryList: [],
				categoryAuthList: [], 
				templateInfo: {}, 
				tableType: 1,
				orgName: "",
				lazyFlag: true
			}
		},
		watch: { 
			filterText(val) { 
				console.log(111111111, this.filterText);
				this.$refs.space.filter(val);
				this.getOrgByUser();
			},
			
		},
		computed: { 
			// 表格高度
			maxHeightNow() {
				const height = window.innerHeight
				return height - 400
			}
		},
		created() { 
			this.getLabelData();
			this.getOrgTree();  
		},
		mounted() {  
		},
	methods: { 
		changeFilterType(val) {  
			this.filterType = val;
			this.filterText = "";
			if (val === "1") { 
				this.getOrgTree();
			}
		},
		getOrgTree() { 
			getOrgTreeApi('0').then(res => {
				this.treeData = res; 
			})
		},
		getOrgByUser() { 
			if (!this.filterText) {
				this.lazyFlag = true;
				return true;
			} 
			getOrgTreeByUserApi(this.filterType === "3" ? {
				account: this.filterText
			} : {
				name: this.filterText
			}).then(res => { 
				this.lazyFlag = false;
				this.treeData = res;
			})
		}, 
		// 获取菜单弹出项
		getLabelData () {
			supplierList().then((res)=>{
				res.map((item, index) => {
					let optionObj = {};
					optionObj.value = item.supplierId;
					optionObj.label = item.supplierName;
					this.$set(this.formOptions[2].options, index, optionObj)
				})
			}) 
			priceTemplateListApi(this.templateParams).then((res) => {  
				res.rows.map((item, index) => {
					// let optionObj = {};
					// optionObj.value = item.id;
					// optionObj.label = item.templateName;
					this.$set(this.templateOption, index, item)
				}) 
			})
		},  
		getTenantsById(id) { 
			getTenantsByIdApi(id).then(res => { 
				this.tenantIds = res;  
				this.getOrgGoodsList(); 
			})
		},
		 // 获取选中行数据
		changeTableSelectData(row) {
			this.tableSelectData = row;
		},
		// 全选
		changeTableSelectAll(data) {
			this.tableSelectData = data;
		},
		getOrgGoodsList() {  
			let params = {
				pageSize: this.tableType == 1 ? this.pageSize : this.pageSize2,
				pageNum: this.tableType == 1 ? this.currentPage : this.currentPage2,
				tenantIds: this.tenantIds,
				isDel: "0",
				type: this.tableType,
				...this.searchData
			};
			orgGoodsListApi(params).then(res => {  
				if (this.tableType == 1) {
					this.tableData1 = res.rows;
					this.total = res.total;
				} else { 
					this.tableData2 = res.rows;
					this.total2 = res.total;
				}
				
			})
		},
		// 获取列表条数，查询数据
		changePageSize(size) {
			if (this.tableType == 1) {
				this.pageSize = size;
			} else { 
				this.pageSize2 = size;
			}
			
			this.getOrgGoodsList();
		},
		// 获取当前分页，查询数据
		changePageCurrent(current) {
			if (this.tableType == 1) {
				this.currentPage = current;
			} else { 
				this.currentPage2 = current;
			}
			
			this.getOrgGoodsList();
		},  
		changeOrgTree(item) { 
			console.log(item);
			this.orgId = item.id;
			this.orgCode = item.code;  
			this.orgName = item.name;
			this.getTenantsById(this.orgId); 
		},
		loadNode(node, resolve) {  
			getOrgTreeApi(node.data.id).then((res) => { 
				if (node.data.type < 4) {
					return resolve(res)
				} else { 
					return resolve([])  
				}
			})
			
		},
		getReturnNode(node, _array, value) {
			let isPass = node && node.label && node.label.indexOf(value) !== -1
			isPass ? _array.push(isPass) : ''
			if (!isPass && node.level != 1 && node.parent) {
				this.getReturnNode(node.parent, _array, value)
			}
		},
		filterNode(value, data, node) {  
			console.log("filterNode----", value);
			if (!value) {
				return true
			}
			let _array = [];
			this.getReturnNode(node, _array, value)
			let result = false
			_array.forEach(item => {
				result = result || item
			})
			return result
		}, 
		// 重置搜索条件
		refreshControlHandle(data) { 
			this.currentPage = 1;
			this.pageSize = 10;
			this.currentPage2 = 1;
			this.pageSize2 = 10;
			this.searchData = data;
			this.getOrgGoodsList(); 
		},
		// 搜索
		onSearch(data) {  
			this.currentPage = 1;
			this.pageSize = 10;
			this.currentPage2 = 1;
			this.pageSize2 = 10;
			this.searchData = data;
			this.getOrgGoodsList();
		}, 
		// 添加商品后刷新
		addGoodsRefresh() { 
			this.batchAddVisible = false;
			this.getTenantsById(this.orgId);
		},
		// 组织选项是否允许编辑
		setTreeDisabled(array, disabled) {
			if (array && array.length > 0) {
				array.forEach(item => {
					item['disabled'] = disabled
					if ('children' in item) {
						this.setTreeDisabled(item.children, disabled)
					}
				})
			}
		},
		openDialog(type) { 
			console.log(type)
			if (this.orgId == "") { 
				this.$message.success("请先选择组织机构！")
				return;
			}

			if (type === 'goods') {
				this.batchAddVisible = true;
			} else { 
				// 分类信息
				this.bindFormData = {};
				this.categoryAuthList = []; 
				this.templateInfo = {};
				this.getCategoryList();
				this.categoryDialogShow = true; 
			}
			
		}, 
		editorOrgCategoty(rowData) { 
			this.categoryDialogShow = true;
			this.getCategoryList();
			this.categoryAuthList = rowData.categoryId.split();
			this.bindFormData = rowData;
			if (rowData.templateId) { 
				selectTemplateApi(rowData.templateId).then(res => this.templateInfo = res)
			} 
		},
		// 编辑
		editorEvent(rowData) { 
			const curData = {
				...rowData
			}  
			this.formData = curData;
			if (curData.templateId) {
				this.hasRule = false;
			} else { 
				this.hasRule = true;
			}
			this.editDialogShow = true;
		},
		// 移出商品库
		deleteGoodsEvent(rowData) {
			this.$confirm('确定要移除该商品?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				deleteGoodsApi(rowData.id).then(() => {
					this.getOrgGoodsList();
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消操作！'
				})
			})
		},
		// // 每页显示条数
		// handleSizeChange(val) {
		// 	this.pageSize = val
		// 	this.getOrgGoodsList()
		// },
		// // 当前页数
		// handleCurrentChange(val) {
		// 	this.currentPage = val
		// 	this.getOrgGoodsList()
		// }, 
		batchRemoveHandle() { 
			let ids = this.tableSelectData.map(item => item.id);
			if (ids.length == 0) { 
				return this.$message.error("请选择删除项！");
			}

			this.$confirm('确定要继续进行此操作?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				console.log(ids);
				batchDeletePoolApi(ids).then(() => {
					this.getOrgGoodsList();
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消操作！'
				})
			})
		},  
		tabClick(tab) { 
			console.log(tab.$attrs.value)
			this.tableType = tab.$attrs.value;
			this.getOrgGoodsList();
		},
		onChangeTemplate() {    
			if (this.formData.templateId) { 
				this.hasRule = false;
				return;
			} 
			this.hasRule = true;
		},
		changeInitExcludeTaxPrice(e) {  
			this.formData.agreementPrice = ((1 + this.formData.initTaxRate / 100) * e).toFixed(2);
		},
		changeInitTaxRate(e) {  
			this.formData.agreementPrice = ((1 + e / 100) * this.formData.initExcludeTaxPrice).toFixed(2);
		},  
		changeExcludeTaxPrice(e) {  
			this.formData.goodsPrice = ((1 + this.formData.taxRate / 100) * e).toFixed(2);
		},
		changeTaxRate(e) {  
			this.formData.goodsPrice = ((1 + e / 100) * this.formData.excludeTaxPrice).toFixed(2);
		},  
		cancelDialogDataHandle() {
			this.batchAddVisible = false;
			this.editDialogShow = false;
			this.categoryDialogShow = false;
		}, 
		saveDialogDataHandle() { 
			this.$refs.editForm.validate((valid) => { 
				if (valid) {   
					updateGoodsApi(this.formData).then(() => {  
						this.editDialogShow = false;
						this.$message({
							message: '保存成功',
							type: 'success'
						})
						this.getOrgGoodsList()
					}).catch(err => {
							this.$message.error(err.msg)
						})
				}
			})

		},
		handleClickTemplate(val) {   
			console.log(val);
			this.templateInfo = val;
		},
		getCategoryList() {
				this.categotyLoading = true
				allCategory().then(res => {
					this.categoryList = res
					this.categotyLoading = false
				})
			},
		filterNodeCategory(value, data) {
			if (!value.toUpperCase()) return true
			return data.categoryNameAll.toUpperCase().indexOf(value.toUpperCase()) !== -1
		},
		saveBindDialogHandle() {  
			 
			if (this.bindFormData.id) { 
				updateGoodsApi(this.bindFormData).then(() => {  
						this.categoryDialogShow = false;
						this.$message({
							message: '保存成功',
							type: 'success'
						})
						this.getOrgGoodsList()
					}).catch(err => {
							this.$message.error(err.msg)
						})
			} else {  
				let categoryIds = this.$refs.treeCategory.getCheckedKeys();
				if (categoryIds.length == 0) { 
					return this.$message.error("请选择商品分类！");
				} 
				let categoryArr = [];
				categoryIds.map(item => categoryArr.push({  
					categoryId: item,
					...this.bindFormData,
				}))

				bindCategoryApi(this.orgId, categoryArr).then(() => {  
					this.categoryDialogShow = false;
					this.$message({
						message: '保存成功',
						type: 'success'
					})
					this.getOrgGoodsList()
				}).catch(err => {
					this.$message.error(err.msg)
				})
			} 
		}
  
		}
	}
</script>

<style scoped lang="scss">
	.box-card {
		margin: 4px;
		height: calc(100vh - 120px);

		.el-card__body {
			padding: 0;
		}

		.el-table {
			margin-top: 20px;
		}

		.el-pagination {
			text-align: right;
		}
	} 

	::v-deep .el-tree>.el-tree-node {
		min-width: 100%;
		display: inline-block;
		// overflow: auto;
	} 
	::v-deep .el-descriptions__body{
		background: none !important;
	}
	.dialog-footer{
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 50%;
		margin-left: -80px;
		margin-bottom: 20px;
	}
	.goodsNameBox {
		overflow: hidden;
		max-width: 100%;
		white-space: nowrap;
		height: 25px;
		text-overflow: ellipsis;
	}
	.tenant-tab{
		position:relative;
		.search-btn{
			position: absolute;
			top: 2px;
			right: 20px;
			z-index: 9;
		}
	}
</style>
<style lang="css">
	.el-tooltip__popper,
	.el-tooltip__popper.is-dark {
		background: #FFFFFF;
		max-width: 400px;
		border-radius: 4px;
		border: 1px solid #e6ebf5;
		padding: 12px;
		color: black;
		line-height: 180%;
		-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.el-tooltip__popper[x-placement^=top] .popper__arrow {
		bottom: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-color: #FFFFFF;
		border-bottom-width: 0;
		-webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.1));
		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
	}

	.el-tooltip__popper[x-placement^=top] .popper__arrow:after {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
	}
	.el-col-4{
		margin-left: 10px;
		margin-bottom: 10px;
	}
	.el-form .el-col-4:nth-child(6){
		margin-left: 82px;
	}
	.is-current > .el-tree-node__content {
		color: #ff4d4f;
	}
	.el-card__body {
		padding: 20px;
	}	
	.tenantGoodsItem .e-btn{
		top: 5px !important; 
	}
</style>
